<template>
  <div>
    <!-- 头部 -->
    <div class="hd-nav">
      <!-- 导航 -->
      <i @click="goback" class="iconfont icon-xiangzuo1 icon-1"></i>
      <p>上映影院购票</p>
      <i class="iconfont icon-fenxiang icon-2" @click="showShare = true"></i>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <!-- 日期模块 -->
    <div class="movie-date">
      <comp-moviedate
        v-on:child-click="myRev"
        :movieDate="movieDate"
      ></comp-moviedate>
    </div>
    <!--筛选 -->
    <div class="movie-filtrate">
      <!-- 轮播图 -->
      <div class="swiper-container filtrate-list" id="filtrate">
        <swiper :options="swiperOption" class="swiper-wrapper">
          <swiper-slide
            class="swiper-slide"
            v-for="(fe, fi) in allFiltArray"
            :key="fi"
            :class="IndexFiltList == fe.name ? 'active' : ''"
          >
            <span class="swiper-slide-span" @click="filtList(fe.name)">
              {{ fe.name }}</span
            >
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- 所有条件 -->
    <div class="condition-item" v-if="IndexFiltList == '品牌' ? true : false">
      <ul class="brand-list">
        <li
          @click="brandfunId(be.id)"
          v-for="(be, bi) in brand.subItems"
          :key="be.id"
        >
          <span> {{ be.name }}</span>
          <span> {{ bi == 0 ? " " : be.count }}</span>
        </li>
      </ul>
    </div>
    <div class="condition-item" v-if="IndexFiltList == '行政区' ? true : false">
      <!-- 左边 -->
      <ul class="area-list">
        <li
          class="area-item"
          @click="areafun(be, bi)"
          :class="areaIndex == bi ? 'active-area' : ''"
          v-for="(be, bi) in area.subItems"
          :key="be.id"
        >
          {{ be.name }}
        </li>
      </ul>
      <!-- 右边 -->
      <ul class="area-right">
        <li
          class="right-item"
          @click="areafunId(ae.id)"
          v-for="(ae, ai) in areaRight"
          :key="ai"
        >
          {{ ai == 0 ? " " : ae.name }}
        </li>
      </ul>
    </div>
    <div
      class="condition-item"
      v-if="IndexFiltList == '影院服务' ? true : false"
    >
      <p>数据有问题 参数不同 数据一样</p>
    </div>
    <div class="condition-item" v-if="IndexFiltList == '地铁' ? true : false">
      <p>数据有问题 参数不同 数据一样</p>
    </div>
    <div class="condition-item" v-if="IndexFiltList == '时段' ? true : false">
      <p>数据有问题 参数不同 数据一样</p>
    </div>
    <!-- 筛选成功后的数据 -->
    <div>
      <comp-cinemas :cinemas="allCinemas"></comp-cinemas>
    </div>
  </div>
</template>
<script>
import { ShareSheet, Cell, Toast } from "vant";

import compMoviedate from "../components/comp-moviedate.vue";
import compCinemas from "../components/comp-cinemas.vue";
export default {
  name: "cinemaTicket",
  data() {
    return {
      movieId: null,
      movieDate: [], //上线日期 xy
      dataChild: "", //子传父
      stateFiltList: false, //筛选状态
      IndexFiltList: "", //
      allFiltArray: [], //所有筛选列表数据，
      allCinemas: [], //所有电影院信息，
      //
      brand: [], //品牌数据
      brandId: -1, //品牌ID
      //
      version: [], //版本数据
      //
      area: [], //行政区数据
      areaId: -1,
      areaIndex: 0, //高亮
      areaRight: [], //行政区右边数据
      //
      specialeffects: [], //特效厅数据
      language: [], //语言数据
      cinema: [], //影院服务数据
      subway: [], //地铁数据
      timeDate: [], //时段数据
      swiperOption: {
        slidesPerView: 4,
        slidesPerGroup: 4,
        observer: true,
        observeParents: true,
      },
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
      ],
    };
  },
  components: {
    compMoviedate,
    compCinemas,
    [ShareSheet.name]: ShareSheet,
    [Toast.name]: Toast,
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //  日期
    getData(k) {
      let pro = axios.get("movie/showdays", {
        params: {
          movieId: k,
          cityId: 20,
        },
      });
      pro
        .then((res) => {
          this.movieDate = res.dates;

          //  默认日期
          this.dataChild = res.dates[0].date;
          console.log("影院上线日期---->", res.dates[0].date);
          console.log("影院上线日期---->", res.dates);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //  处理筛选数据
    getMovieData(l, c) {
      let pro = axios.get("movie/select/items", {
        params: {
          movieId: l,
          cityId: 20,
          showDate: c,
          //测试
        },
      });
      pro
        .then((res) => {
          this.allFiltArray = [];
          for (let key in res) {
            if (res[key] != null) {
              this.allFiltArray.push(res[key]);
              switch (res[key].name) {
                case "品牌":
                  this.brand = res[key];
                  console.log("匹配成功---品牌品牌", res[key]);
                  break;
                case "版本":
                  this.version = res[key];
                  // console.log("匹配成功---", res[key]);
                  break;
                case "行政区":
                  this.area = res[key];
                  // console.log("匹配 成功---", res[key]);
                  break;
                case "特效厅":
                  this.specialeffects = res[key];
                  // console.log("匹配成功---", res[key]);
                  break;
                case "语言":
                  this.language = res[key];
                  // console.log("匹配成功---", res[key]);
                  break;
                case "影院服务":
                  this.cinema = res[key];
                  // console.log("匹配成功---", res[key]);
                  break;
                case "地铁":
                  this.subway = res[key];
                  // console.log("匹配成功---", res[key]);
                  break;
                case "时段":
                  this.timeDate = res[key];
                  // console.log("匹配成功---", res[key]);
                  break;
                default:
                  console.log("找不到---");
                  break;
              }
            }

            // console.log("n----->", n);
          }
          //  console.log(this.allFiltArray);
          //   this.allFiltArray = res
          //  console.log("电影--筛选-->", res);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //  子传父  日期
    myRev(msg) {
      this.dataChild = msg;
      console.log("-子传父----------------", msg);
      this.getMovieData(this.$route.query._id, msg);
      this.screenedCinemas(this.movieId, msg, this.brandId);
    },
    //  筛选逻辑
    filtList(k) {
      if (this.IndexFiltList == k) {
        this.IndexFiltList = "两次相等";
      } else {
        this.IndexFiltList = k;
      }
    },
    //  品牌逻辑
    brandfunId(k) {
      this.brandId = k;
      console.log("---品牌---", k);
    },
    //  行政区逻辑
    areafun(k, i) {
      this.areaRight = k.subItems;
      this.areaIndex = i;
      console.log("-行政区逻辑---", k.subItems);
    },
    areafunId(k) {
      this.areaId = k;
      console.log("--行政区---", k);
    },
    //  筛选出来的电影院
    // k 电影id  s 日期
    screenedCinemas(k, s, b) {
      let pro1 = axios.get("movie/select/cinemas", {
        params: {
          limit: 20, //每页显示的数据
          offset: 0, //跳过的数据
          showDate: s,
          movieId: k,
          brandId: b,
          //  sort: "distance",
          cityId: 20, //城市id
          lat: 23, //纬度
          lng: 113, //经度
          //  districtId:-1,
          //  lineId:-1,
          //  areaId:-1,
          //  stationId:-1,
        },
      });
      pro1
        .then((res) => {
          this.allCinemas = res;
          console.log("----最终数据----", res);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //  测试，我人傻了都
    textgetData() {
      let pro1 = axios.get("index/moreCinemas", {
        params: {
          day: this.movieDate,
          brandId: this.brandId,
          districtId: this.areaId,
        },
      });
      pro1
        .then((res) => {
          console.log("----test---->", res);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    // 获取当前时间
    toData() {
      let toTime = new Date();
      let y = toTime.getFullYear();
      let M = toTime.getMonth() + 1;
      let d = toTime.getDate();
    
      // 补零
      M = this.addZero(M);
      d = this.addZero(d);
     
      return y + "-" + M + "-" + d
    },
    // 补零
    addZero(n) {
      if (n < 10) {
        return (n = "0" + n);
      }
      return n;
    },
  },
  watch: {
    //   品牌id 接口用不了
    brandId(value) {
      // let arr = [];
      console.log("--品牌--", value, this.movieId, this.dataChild);
      // arr.push(value);
      this.screenedCinemas(this.movieId, this.dataChild, value);
    },
  },
  created() {},
  mounted() {
    this.getData(this.$route.query._id);
    // let nowTime = new Date().toLocaleDateString();
    // console.log("时间---",this.toData());
    // let repTime = nowTime.replace(/\//g, "-");
    //   电影id
    let repTime = this.toData()
    this.movieId = this.$route.query._id;
    console.log(this.dataChild, "this.dataChild");
    this.getMovieData(this.$route.query._id, repTime);

    //  难搞哇

    // if(this.movieDate.length == 0){
    //   console.log('0');
    // }else{
    //   console.log("1");
    // }
    this.screenedCinemas(this.movieId, repTime, -1);
    //  console.log(this.$route.query._id);
  },
};
</script>

<style lang="scss" scoped>
// 头部
.hd-nav {
  width: 100%;
  height: 44px;
  background: #dd403b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  .icon-1 {
    font-size: 30px;
    margin-left: 10px;
    color: rgb(255, 255, 255);
  }
  .icon-2 {
    font-size: 30px;
    margin-right: 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
  }
  p {
    font-size: 22px;
    color: rgb(255, 255, 255);
  }
}
// 日期
.movie-date {
  margin-top: 44px;
}
//    <!--筛选 -->
.movie-filtrate {
  width: 100%;
  border-bottom: 1px solid rgb(238, 238, 238);

  .filtrate-list {
    width: 352px;
    margin: 0 auto;
    .swiper-wrapper {
      .swiper-slide {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        .swiper-slide-span {
          font-size: 18px;
        }
      }
    }
  }
}
.active {
  color: #dd403b !important;
}
//   筛选详情
.condition-item {
  width: 100%;
  min-height: 200px;
  max-height: 600px;
  background: #ccc;
  overflow: auto;
  display: flex;
  //   品牌
  .brand-list {
    width: 300px;
    margin: 0 auto;
    li {
      display: flex;
      justify-content: space-between;
      padding: 7px 0;
      span {
        font-size: 18px;
      }
      &:first-child {
        color: #dd403b;
        font-weight: bold;
      }
    }
  }
  //   行政区
  .area-list {
    width: 30%;
    border: 0;
    .area-item {
      width: 100%;
      text-align: center;
      display: block;
      padding: 16px 0;
      font-size: 18px;
    }
    .active-area {
      background: rgb(233, 233, 233);
    }
  }
  // 右边
  .area-right {
    width: 70%;
    min-height: 800px;
    background: rgb(233, 233, 233);
    .right-item {
      padding: 10px 0 10px 20px;
      font-size: 18px;
    }
  }
}
</style>